<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/layui/layui_2/layui/css/layui.css"
	media="all">
	<style type="text/css">
        .layui-table-cell {
            height: 50px;
            line-height: 55px;
            text-align: center;
           	
        }
    </style>
</head>
<body>
	<br/>
	<div id='update_dept_div'>
	  	<div style="display: inline;padding-left: 5px">员工姓名:<input type="text" id="name" name="name" style="height: 34px;width: 150px">
		</div>
		<div style="display: inline;padding-left: 25px">
			员工性别:
			<select name="sex" id="sex" style="width: 150px;height: 40px">
            	<option value="">---请选择---</option>
            	<option value="1">男</option>
            	<option value="0">女</option>
            </select>
		</div>
		<div style="display: inline;padding-left: 25px">
			员工部门:
			<select name="pId" id="deptSelect" style="width: 150px;height: 40px">
            	<option value="">---请选择---</option>
            	<option value="-1">待议</option>
            </select>
		</div>
		<div style="display: inline;">
			<button class="layui-btn" id="query">
	  			<i class="layui-icon">&#xe615;</i> 查询
			</button>
		</div>
	</div>
	<table class="layui-table" id="emp_query_table" lay-filter="emp_query_table"></table>
	<script src="${pageContext.request.contextPath }/layui/layui_2/layui/layui.js"></script>
	<script>
		layui.use(['form','element','jquery','table','layer'], function() {
			var form = layui.form,
				element = layui.element,
				$ = layui.jquery,
				table = layui.table,
				layer = layui.layer;
			
			var cols = [ [ {
				field : 'e_id',
				align : 'center',
				title : '员工编号',
				width : 150
			},{
				field : 'PName',
				align : 'center',
				title : '所在部门',
				width : 150
			}, {
				field : 'e_loginname',
				title : '登录名',
				align : 'center',
				width : 150
			}, {
				field : 'e_psw',
				align : 'center',
				title : '登录密码',
				width : 150
			}, {
				field : 'e_img',
				align : 'center',
				title : '员工头像',
				width : 150,
				templet: '<div><img src="{{d.e_img}}" style="width: 50px;height: 50px;"/></div>'
			}, {
				field : 'e_sex',
				align : 'center',
				title : '员工性别',
				width : 150,
				templet: '#esex'
			}, {
				field : 'e_flag',
				align : 'center',
				title : '员工类别',
				width : 150,
				templet: '#flag'
			}, {
				field : 'e_admin',
				align : 'center',
				title : '权限级别',
				width : 150,
				templet: '#admin'
			}, {
				field : 'e_truename',
				align : 'center',
				title : '员工真实姓名',
				width : 150
			}, {
				field : 'e_remark',
				align : 'center',
				title : '员工备注',
				width : 150
			}, {
				field : 'e_is',
				title : '状态',
				align : 'center',
				width : 200,
				templet: '#is'
			} ] ];
			
			//方法级渲染
			var tableIns = table.render({
				elem : '#emp_query_table',
				url : '${pageContext.request.contextPath }/empAction_findByPage',
				cols : cols,
				id : 'testReload',
				method:'post',
				limit: 10,
			    limits: [10, 30, 50],
				page : true
			});
			
			//动态添加部门选项
	        $.post('${pageContext.request.contextPath}/deptAction_getByName',{},function(data){
	        	for(var i = 0;i< data.length;i++){
	        		var id = data[i].p_id;
	        		var name = data[i].p_name;
	        		$('#deptSelect').append("<option value="+id+">"+name+"</option>");
	        	}
	        	form.render();
	        })
	        
	        
			
			$("#query").click(function(){
				var name = $("#name").val();
				$("#name").val("");
				var sex = $("#sex").val();
				$("#sex").val("");
				var deptId = $("#deptSelect").val();
				$("#deptSelect").val("");
				table.reload('testReload', {
					  url: '${pageContext.request.contextPath}/empAction_queryfindByPage'
					  ,where: {
						  e_truename : name,
						  e_sex : sex,
						  p_id : deptId
					  } //设定异步数据接口的额外参数
				});
			})
		})
		
	</script>
	<script type="text/html" id="esex">
  		{{#  if(d.e_sex == 1){ }}
    		男
  		{{#  } else { }}
    		女
 		{{#  } }}
	</script>
	<script type="text/html" id="flag">
  		{{#  if(d.e_flag == 1){ }}
    		部门主管
  		{{#  } else { }}
    		普工
  		{{#  } }}
	</script>
	<script type="text/html" id="admin">
  		{{#  if(d.e_admin == 1){ }}
    		部门主管
  		{{#  } else { }}
    		普通操作者
  		{{#  } }}
	</script>
	<script type="text/html" id="is">
  		{{#  if(d.e_is == 1){ }}
    		在职
  		{{#  } else { }}
    		<h1 style="color: red;">离职</h1>
  		{{#  } }}
	</script>
</body>
</html>